<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px">
    <el-row :gutter="20">
      <el-col :span="20">
        <el-form-item label="取水权人名称" prop="ownerName">
          <el-input v-model="ruleForm.ownerName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="取水权人代码" prop="ownerCode">
          <el-input v-model="ruleForm.ownerCode"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="取水权人代码类型" prop="ownerType">
          <Aselect
            v-model="ruleForm.ownerType"
            :options="options"
            placeholder=""
          />
        </el-form-item>
      </el-col>
      <el-col :span="20">
        <el-form-item prop="personInfo">
          <div class="add">
            <div class="title">填写一个共有取水权人信息</div>
            <Atable
              :tableData="tableData"
              :tableModel="tableModel"
            >
              <template #expand="{ row }">
                <FormTable
                  style="padding: 0px 10px 0px 40px"
                  :formData="row.formData"
                  :tableModel="formTableModel"
                  :disabled="false"
                >
                </FormTable>
              </template>
            </Atable>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="行业类别" prop="ownerFont">
          <el-input v-model="ruleForm.ownerFont"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="注册地址邮编" prop="intLocation">
          <el-input v-model="ruleForm.intLocation"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="20">
        <el-form-item label="注册地址" prop="intAddvcd">
          <el-input v-model="ruleForm.intAddvcd"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="20">
        <el-form-item label="生产经营场所行政区域" prop="yearHave">
          <AreaSelect
            :form="ruleForm"
          />
        </el-form-item>
      </el-col>
      <el-col :span="20">
        <el-form-item label="生产经营场所地址" prop="baozen">
          <el-input v-model="ruleForm.baozen"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="20">
        <el-form-item label="法定代表人" prop="intType">
          <MultiSelect
            v-model="ruleForm.intType"
            :options="options"
            placeholder="可以多选项"
          />
        </el-form-item>
      </el-col>
      <el-col :span="20">
        <el-form-item label="用水管理部门" prop="waterType">
          <MultiSelect
            v-model="ruleForm.waterType"
            :options="options"
            placeholder="可以多选项"
          />
        </el-form-item>
      </el-col>
      <el-col :span="20">
        <el-form-item label="法定代表人代码类型" prop="waterValue">
          <MultiSelect
            v-model="ruleForm.waterValue"
            :options="options"
            placeholder="可以多选项"
          />
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="法定代表人代码" prop="ableDateFrom">
          <AdatePicker v-model="ruleForm.ableDateFrom" placeholder="" />
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="联系人" prop="ableDateTo">
          <AdatePicker v-model="ruleForm.ableDateTo" placeholder="" />
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="联系人手机号码" prop="preCode">
          <el-input v-model="ruleForm.preCode"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="建设项目性质" prop="preDate">
          <AdatePicker v-model="ruleForm.preDate" placeholder="" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import MultiSelect from '@/components/Select/MultiSelect';
import AdatePicker from '@/components/TimePicker/AdatePicker';
import Aselect from '@/components/Select/Aselect';
import Atable from '@/components/Table/Atable';
import FormTable from '@/components/Table/FormTable';
import AreaSelect from "@/components/AreaSelect/AreaSelect"
const requiredObj = {
  required: true,
  message: '此项为必填项',
  trigger: 'none',
};
export default {
  components: {
    MultiSelect,
    AdatePicker,
    Aselect,
    Atable,
    FormTable,
    AreaSelect
  },
  data() {
    return {
      ruleForm: {
        ownerCode: null, // 取水权人代码
        ownerName: null, // 取水权人名称
        ownerType: null, // 取水权人代码类型,
        personInfo: null, // 添加一个共有取水权人信息
        ownerFont: null, // 行业类别
        intLocation: null, // 注册地址邮编
        intAddvcd: null, // 注册地址
        pro: null,
        city: null,
        county: null,
        yearHave: null, // 生产经营场所行政区域
        baozen: null, // 生产经营场所地址
        intType: null, // 法定代表人
        waterType: null, // 用水管理部门
        waterValue: null, // 法定代表人代码类型
        ableDateFrom: null, // 法定代表人代码
        ableDateTo: null, // 联系人
        preCode: null, // 联系人手机号码
        preDate: null, // 建设项目性质
      },

      rules: {
        ownerCode: [requiredObj], // 取水权人代码
        ownerName: [requiredObj], // 取水权人名称
        ownerFont: [requiredObj], // 行业类别
        intLocation: [requiredObj], // 注册地址邮编
        intAddvcd: [requiredObj], // 注册地址
        yearHave: [requiredObj], // 生产经营场所行政区域
        baozen: [requiredObj], // 生产经营场所地址
        intType: [requiredObj], // 法定代表人
        waterType: [requiredObj], // 用水管理部门
        waterValue: [requiredObj], // 法定代表人代码类型
        ableDateFrom: [requiredObj], // 法定代表人代码
        ableDateTo: [requiredObj], // 联系人
        preCode: [requiredObj], // 联系人手机号码
        preDate: [], // 建设项目性质
      },
      options: [{ value: '选项1' }, { value: '选项2' }, { value: '选项3' }],
      tableData: [],
      tableModel: [
        {
          type: 'index',
          label: 'No.',
        },
        {
          prop: 'name',
          label: '共有取水权人名称(或姓名)',
        },
        {
          prop: 'num',
          label: '*共有取水权人份额',
        },
        {
          prop: 'type',
          label: '共有取水权人类型',
        },
        {
          prop: 'code',
          label: '共有取水权人代码',
        },
        {
          prop: 'actions',
          label: '操作',
          width: "50px"
        },
      ],
    };
  },
  methods: {
    //  保存
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    // 清空
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.add {
  text-align: center;
  border: 1px solid #d3d3d3;
  .title{
  border-bottom: 1px solid #d3d3d3;
    padding: 5px;
    margin-bottom: 10px;
  }
}
</style>
